07. Getting User Data in Flask — Part 2

Getting User Data in Flask — Part 2

In this next series, let's begin implementing the Create To-Do Item functionality in our To-Do app. We'll preview conceptually how we'd use a form to send a POST request to our server to begin a request for to-do item creation, and then implement it in code.

ND004 C01 L05 06.3 Getting User Data In Flask

Video Correction Notes

  • Response Body should be changed to Request Body, throughout.

Let's start coding!

These next videos walk through how to implement a form that successfully creates new todo items in our backend database.

Challenge yourself

Can you implement the MVC layers of this create functionality without watching the walk-throughs? Try it out in the interactive workspace at the end of this page!

Developing our view and running the app in debug mode

ND004 C01 L05 07 Demo - Getting Form Data In Flask

Code

index.html 
<html>
  <head>
    <title>Todo App</title>
  </head>
  <body>
    <form method="post" action="/todos/create">
      <input type="text" name="description" />
      <input type="submit" value="Create" />
    </form>
    <ul>
      {% for d in data %}
      <li>{{ d.description }}</li>
      {% endfor %}
    </ul>
  </body>
</html>

Try it now in the interactive workspace below.

Developing the controller

ND004 C01 L05 07.1 Demo - Getting Form Data In Flask

Horray!

We have a fully working MVC flow capable of creating new todo items from the view, interacting with models to create those new records, and then updating our view to show them!

Code

app.py 
@app.route('/todos/create', method=['POST'])
def create_todo():
  description = request.form.get('description', '')
  todo = Todo(description=description)
  db.session.add(todo)
  db.session.commit()
  return redirect(url_for('index'))
terminal commands 
$ FLASK_APP=app.py FLASK_DEBUG=true flask run
$ psql todoapp
>>> select * from todos;

Let's review how we implemented the flow of data in our app!

ND004 C01 L05 07.2 Demo - Getting Form Data In Flask

Follow along!

In the interactive workspace below, practice implementing the ability to Create To-Do items.

  • The view (HTML form)
  • The controller (that receives the form submission)
  • The model interactions (within the controller)

Starter Code

The workspace below is based on prior work you may have done in previous practices. The starter code below is meant to help you start on a clean starting point if needed.

app.py 
from flask import Flask, render_template
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'postgres://udacitystudios@localhost:5432/todoapp'
db = SQLAlchemy(app)

class Todo(db.Model):
  __tablename__ = 'todos'
  id = db.Column(db.Integer, primary_key=True)
  description = db.Column(db.String(), nullable=False)

  def __repr__(self):
    return f'<Todo {self.id} {self.description}>'

db.create_all()

@app.route('/')
def index():
  return render_template('index.html', data=Todo.query.all())
templates/index.html 
<html>
  <head>
    <title>Todo App</title>
  </head>
  <body>
    <ul>
      {% for d in data %}
      <li>{{ d.description }}</li>
      {% endfor %}
    </ul>
  </body>
</html>

Workspace

This section contains either a workspace (it can be a Jupyter Notebook workspace or an online code editor work space, etc.) and it cannot be automatically downloaded to be generated here. Please access the classroom with your account and manually download the workspace to your local machine. Note that for some courses, Udacity upload the workspace files onto https://github.com/udacity , so you may be able to download them there.

Workspace Information:

  • Default file path:
  • Workspace type: jupyter-lab
  • Opened files (when workspace is loaded): n/a

Next Concept